<template>
    <div class="hot">
        <ul>
            <li v-for="item in list" :key="item.filmId">
                <img :src="item.poster" alt="">
                <p>{{item.name}}</p>
                <p>观众评分{{item.grade}}</p>
                <p class="hidden">主演:{{item.actors | actorsfilter}}</p>
                <p>{{item.nation}} | {{item.runtime}}分钟</p>
            </li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios'
import Vue from "vue"
Vue.filter("actorsfilter",(actors) => {
    // console.log(actors);
    return actors.map(item => item.name).join(" ")
})
export default{
    data() {
        return {
            list:[]
        };
    },
    mounted () {
        axios({
            url: 'https://m.maizuo.com/gateway?cityId=440300&pageNum=1&pageSize=10&type=1&k=3949987',
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16309772131414740752465921","bc":"310100"}',
                'X-Host': 'mall.film-ticket.film.list'
            }
        }).then((res)=>{
            console.log(res.data.data.films)
            this.list = res.data.data.films
        })
    }
}
</script>

<style lang="scss" scoped>
    li{
        overflow: hidden;
        padding: 10px;
        img{
            float: left;
            width: 100px;
        }
    }
    .hidden {
        width: 150px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
</style>